<template>
	<div class="lineEchart">
		<el-card class="box-card">
			<div ref="myChart" :style="{ width: '100%', height: '430px' }" id="lineEchart" class="text item"></div>
		</el-card>
	</div>
</template>

<script lang="ts">
import { ref, onMounted, defineComponent, onActivated, onBeforeUnmount, onDeactivated, nextTick, watch, watchEffect } from 'vue'
import { init } from 'echarts'
import { lineEchart } from '@/mockData/echarts'
import resize from '@/utils/echartResize.ts'
export default defineComponent({
	name: 'lineEchart',
	setup() {
		const { mounted, chart, beforeDestroy, activated, deactivated } = resize()
		const intiEchart = () => {
			const bareChart = init(document.getElementById('lineEchart') as HTMLDivElement)
			bareChart.setOption(lineEchart)
			chart.value = bareChart
		}

		onMounted(() => {
			mounted()
			nextTick(() => {
				intiEchart()
			})
		})

		onBeforeUnmount(() => {
			beforeDestroy()
		})

		onActivated(() => {
			activated()
		})

		watch(lineEchart, (CurrentParameters, OriginalParameters, Invalidate) => {
			nextTick(() => {
				intiEchart()
			})
			Invalidate(() => {
				//副作用函数
				//会在监听项第二次发生变化时调用
			})
		})

		onDeactivated(() => {
			deactivated()
		})

		return {
			intiEchart,
		}
	},
})
</script>

<style scoped lang="scss">
.divs {
	color: $theme;
}
.lineEchart {
	width: 100%;
	background-color: white;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
	position: relative;
	.el-row {
		padding: 30px;
	}
}
</style>
